<template>
	<view>
		<view class="vc-item" v-if="type == 10">
			<text class="vc-item-title">{{ title }}</text>
			<input class="vc-item-content" v-model="values" :placeholder="'请输入' + title" maxlength="20" />
		</view>
		<view class="vc-item" v-if="type == 40">
			<text class="vc-item-title">{{ title }}</text>
			<picker mode="date" @change="bindDateChange" :value="birth_day" class="vc-item-content">
				<view class="uni-input">{{ birth_day }}</view>
			</picker>
		</view>
		<view class="vc-item" v-if="type == 30">
			<text class="vc-item-title">{{ title }}</text>
			<picker :range="genderList" :value="gender_value" @change="bindGenderChange" class="vc-item-content">
				<view class="uni-input">{{ gender_name }}</view>
			</picker>
		</view>
		<view v-if="type == 20">
			<view class="vc-item">
				<text class="vc-item-title">{{ title }}</text>
				<input class="vc-item-content" v-model="values" :placeholder="'请输入' + title" maxlength="18" />
			</view>
			<view class="vc-item">
				<button class="code-btn" style="height: 80rpx;" :disabled="isSendCode" :style="{ background: isSendCode ? '#999' : '#f95b4f' }" @click="sendCode">
					{{ codeTest }}
				</button>
			</view>
			<view class="vc-item">
				<text class="vc-item-title">验证码</text>
				<input class="vc-item-content" v-model="code" placeholder="请输入验证码" maxlength="6" />
			</view>
		</view>
		<view v-if="type == 50">
			<view class="vc-item">
				<text class="vc-item-title">{{ title }}</text>
				<picker mode="multiSelector" class="work-time" :value="workStartTime" :range="timeRange" @change="startTimeChange">
					<view class="uni-input">{{ workStartTime }}</view>
				</picker>
				<text class="interval">-</text>
				<picker mode="multiSelector" class="work-time" :value="workEndTime" :range="timeRange" @change="endTimeChange" style="margin-right: 20rpx;">
					<view class="uni-input">{{ workEndTime }}</view>
				</picker>
			</view>
		</view>
		<view class="done-btn bottom-change-view" @click="saveServerPlayer()">保存</view>
	</view>
</template>

<script>
import { successToShow, errorToShow, formatDate } from '@/config/common.js';
import { sendValidateCode, checkValidateCode } from '@/constant/customer.js';
import { updateServePlayer } from '@/constant/schedule.js';

export default {
	data() {
		return {
			title: '',
			type: 1,
			playType: 1,
			key: '',
			values: '',
			birth_day: new Date(),
			gender_value: 0,
			gender_name: '',
			genderList: ['女', '男'],
			isSendCode: false,
			seconds: 60,
			codeTest: '发送验证码',
			customerId: '',
			code: '',
			timeRange: [],
			workStartTime: '',
			workEndTime: ''
		};
	},
	created() {
		//时间控件的选项
		let hour = [];
		let minute = ['00', '30'];
		for (var i = 0; i < 24; i++) {
			hour.push([(Array(2).join(0) + i).slice(-2)]);
		}
		this.timeRange = [hour, minute];
	},
	onLoad(info) {
		let userInfo = JSON.parse(uni.getStorageSync('ServePlayer_UserInfo'));
		this.customerId = userInfo.Id;
		this.title = info.title;
		this.type = info.type;
		this.key = info.key;
		this.values = info.values;
		if (this.type == 30) {
			this.gender_value = this.values;
			this.gender_name = this.gender_value == 1 || this.gender_value == '男' ? '男' : '女';
		} else if (this.type == 40) {
			if (this.values) {
				this.birth_day = this.values;
			} else {
				this.birth_day = formatDate(new Date(), 'yyyy-MM-dd');
			}
		} else if (this.type == 50) {
			this.workStartTime = this.values;
			this.workEndTime = info.values2;
		}
	},
	methods: {
		async sendCode() {
			this.isSendCode = true;
			await sendValidateCode({
				phone: this.values,
				code: ''
			});
			successToShow('发送成功');

			let timer = setInterval(() => {
				this.seconds--;
				this.codeTest = '重新发送' + this.seconds + 's';
				if (this.seconds == 0) {
					clearInterval(timer);
					this.codeTest = '发送验证码';
					this.isSendCode = false;
					this.seconds = 60;
				}
			}, 1000);
		},
		bindDateChange(e) {
			this.birth_day = e.target.value;
		},
		bindGenderChange(e) {
			this.gender_value = this.genderList[e.target.value];
			this.gender_name = this.gender_value;
		},
		startTimeChange: function(e) {
			this.workStartTime = this.timeRange[0][e.detail.value[0]] + ':' + this.timeRange[1][e.detail.value[1]];
		},
		endTimeChange: function(e) {
			this.workEndTime = this.timeRange[0][e.detail.value[0]] + ':' + this.timeRange[1][e.detail.value[1]];
		},
		async saveServerPlayer() {
			let userInfo = JSON.parse(uni.getStorageSync('ServePlayer_UserInfo'));
			switch (this.key) {
				case 'Sign':
					userInfo.Sign = this.values;
					break;
				case 'NickName':
					userInfo.NickName = this.values;
					break;
				case 'HourlyWage':
					userInfo.HourlyWage = this.values;
					break;
				case 'Phone':
					await checkValidateCode({
						phone: this.values,
						code: this.code
					});
					userInfo.Phone = this.values;
					break;
				case 'Gender':
					userInfo.Gender = this.gender_value;
					break;
				case 'BirthDay':
					userInfo.BirthDay = this.birth_day;
					break;
				case 'WorkTime':
					userInfo.BeginTime = this.workStartTime;
					userInfo.EndTime = this.workEndTime;
					break;
			}
			await updateServePlayer(userInfo);
			uni.setStorageSync('ServePlayer_UserInfo', JSON.stringify(userInfo));
			successToShow('保存成功', res => {
				uni.navigateBack({
					delta: 1
				});
			});
		}
	}
};
</script>

<style scoped lang="scss">
.vc-item {
	display: flex;
	align-items: center;
	font-size: $main-text-size-28;
	color: $main-text-color-gray-33;
	height: 90rpx;
	background-color: #fff;
	border-bottom: 1px solid $main-page-color;

	&-title {
		margin-right: auto;
		margin-left: 20rpx;
	}

	&-content {
		margin-right: 20rpx;
		width: 500rpx;
		text-align: right;
	}
}

.done-btn {
	height: 80rpx;
	width: 600rpx;
	margin-left: 75rpx;
	background-color: $main-theme-color-green;
	color: #fff;
	font-size: 32rpx;
	position: absolute;
	bottom: 40rpx;
	border-radius: 45rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.code-btn {
	background-color: #007aff;
	color: #fff;
	font-size: 30rpx;
	margin-left: auto;
	margin-right: 20rpx;
	border-radius: 10rpx;
	height: 70rpx !important;
	line-height: 70rpx;
}
</style>
